Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Paidjoo Landing Page is a HTML template so there's no really "installation" required just unzip the main file you've downloaded from templateforest and after unziping you have your all template ready to be used. Inside the main item file you will get 2 different layouts with 2 variations file.

Here is the general structure from Loan layout, all elements are nested under .main-container:

<!-- Begin Main Container Section -->
<div class="main-container">
..
...
<!-- Header Section -->
<section id="head-content">
  <div class="container">
    <div class="row">
      <div class="span6 leftside-header">
        <a href="#"><img src="img/logo-green.png" alt="Logo"/></a>
      </div><!--/ leftside-header -->
    <div class="span6 rightside-header">
      <div class="row-fluid">
        <div class="span6 chat-box pull-right">
          <h5>Got any question?</h5>
          <h6>Chat with us live!</h6>
          <a href="#" class="btn btn-small btn-yellow">Go to chat!</a>
        </div><!--/ .chat-box -->
      </div>
    </div><!--/ rightside-header -->
  </div>
</div> <!-- /container -->
</section>
<!--/ END Header Section-->

<!-- Head Banner Section -->
<section id="head-banner">
  <div class="container">
    <div class="row">
      <div class="span6">
        <h1 class="tagline animated fadeInLeft">Your Tagline Goes Here</h1>
        <div class="flexslider-testimonial">
          <ul class="slides">
            <li>
              <p class="testi">Lorem ipsum dolor sit amet... .</p>
              <p class="author"> John Doe, United Kingdom </p>
            </li>
            ...
            ...
          </ul> <!--/ .slides -->
        </div><!--/ .flexslider-testimonial -->
...
..
</div>
<!--/ END Main Container -->

There are some CSS Files used in this template. And here are the short explanations about them :

1. bootstrap.css - The Twitter Bootstrap Framework, do not edit this file.
2. bootstrap-responsive.css - The Twitter Bootstrap Framework for Responsive layout, do not edit this file.
3. style.css - This is the main CSS file that controls almost everything on the Green Loan layout
4. style2.css - This is the main CSS for Blue List layout
5. style-flat1.css - This is the main CSS for Flat Green Loan layout
6. style-flat2.css - This is the main CSS for Flat Blue List layout
7. style-responsive.css - The resposive style for all layouts above
8. flexslider.css - The style for jQuery Flexslider plugin Please note that this template has a bit custom flexslider style on the header of each layout
9. prettyPhoto.css - The style for jQuery Pretty Photo lightbox plugin
10. animate.min.css - The style for making some effects on Head Banner and Slider

Here is the presets of the Green Loan layout (style.css):

/**********************************************************************************

	Project Name: Green Skeuomorph Style for Paidjoo Landing Page
	Project Description: Paidjoo is a business, corporate landing page, and subscribe list page
	Author: xWisnux (Works of Wisnu)
	Author URI: http://www.worksofwisnu.com
	Version: 1.0.0

**********************************************************************************/
@font-face, Icon Fonts style

/* General */

body, list, paragraph, headings, link, section, .centered, .uppercase, .rollover

/* Gradient BG */
.green-gradient, .blue-gradient

/* Buttons */
/btn, .btn-small, .btn-yellow

/* Social Buttons */
.social, .social li, .social li a

/* Alerts */
.alert .alert-icon, .alert-success, .alert-info, .alert-error, .form-error-message

/* #Top Header Section */

top-header, .head-social, .head-email

/* #Head Content Section */
head-content, .chat-box, .login-box

/* #Head Banner Section */
head-banner, .tagline, .sub-tagline, .testi, .author, .video-button, .headbanner-form, .form-spacer, .headbanner-form input, .headbanner-form label, .headbanner-form select, .small-form-text, .layout-slider

/* #Marketing Section */
marketing, marketing .title, .marketing-content, .marketing-icon

/* #Featurettes Section */
featurettes, .dark-section, .dark-section .title, .dark-section h3, .dark-section span*, .dark-subtitle, .checklist, .green-list, .blue-list

/* #Lower Content Section */
lower-content, lower-content .title, lower-content h3, .subtitle, .toggle-content, .toggle-group, .toggle-heading .toggle-button, .toggle-faq, .toggle-inner, .map, .contact-info p, .contact-info li, .green-contact-info-icon, .blue-contact-info-icon, .flexslider-content-testimonial, .flexslider-content-testimonial ul.testimonials-list li

/* #Breakline Section */
breakline, breakline h3, .counter, .clients

/* #Footer Section */
footer, .copyright, .footer-subscribe, .footer-subscribe input, .footer-subscribe-text,  .toTop

4.1. Head Banner Testimonial Slider

<div class="flexslider-testimonial">
  <ul class="slides">
    <li>
      <p class="testi">Lorem ipsum dolor sit amet... .</p>
      <p class="author"> John Doe, United Kingdom </p>
    </li>
   <li>
   ...
   ...
  </ul> <!--/ .slides -->

</div><!--/ .flexslider-testimonial -->

4.2. Dark Section Featurettes Slider

<div class="span12 flexslider-featurettes">
<ul class="slides row-fluid">
  <li>
    <div class="span6">
      <a href="img/teehanlax.jpg" rel="prettyPhoto[gallery2]" title="You can add caption to pictures.">
        <span class="span6 rollover" ></span>
        <img src="img/screenshots.png" class="animated flipInX" alt="Screenshot"/>
      </a>
    </div>

	<div class="span6">
	  <h3 class="animated fadeInUp">Some Feature Here?</h3>
	  <p class="dark-subtitle">some description about your special service here</p>
	  <p class="animated bounceInRight">Lorem ipsum dolor sit amet... .</p>
	</div>
  </li>
  ...
  ...
</ul><!--/ .slides -->

</div> <!--/ .flexslider-featurettes -->

4.3. Lower Content Testimonial Slider

<div class="span12 flexslider-content-testimonial">
  <ul class="testimonials-list slides">
    <li>
      <img src="img/testimonial-photo.png" alt="Testi-Photo"/> <!-- Place the photos here, 150x150 image is best -->
      <p> Lorem ipsum dolor sit amet... .</p>
      <p class="author">John Doe / <span> Some Profession </span></p>
    </li>
	...
	...
</ul> <!-- / .testimonials-list -->
</div> <!--/ .flexslider-content-testimonial -->

4.4 Toggle FAQ

<div class="toggle-content">

  <div class="toggle-group">
    <div class="toggle-heading">
      <a class="toggle-button" href="#"><span class="toggle-faq">Q</span>Maecenas faucibus mollis interdum?</a>
    </div>
    <div class="toggle-inner collapse">
      <p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
    </div>
  </div> <!--/ .toggle-group 1 -->

  <div class="toggle-group">
    <div class="toggle-heading">
      <a class="toggle-button" href="#"><span class="toggle-faq">Q</span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula?</a>
    </div>
    <div class="toggle-inner collapse">
      <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
  </div> <!--/ .toggle-group 2 -->
...
...
</div> <!--/ .toggle-content -->

If you want to apply the toggle without "Q" marks, simply remove the span .toggle-faq.

4.5. Clients Counter on Breakline

<ul class="counter">
  <li>
    <span class="counter-number">1</span>
  </li>
  <li>
    <span class="counter-number">2</span>
  </li>
  <li>
    <span class="counter-number">3</span>
  </li>
  <li>
    <span class="counter-number">4</span>
  </li>
  <li>
    <span class="counter-number">5</span>
  </li>
</ul><!--/ .counter -->

This template uses several scripts many of which are documented within the template's code. If you're a developer, you will find this particularly useful.

1. jQuery
2. bootstrap.min.js - Minified version of Bootstrap jQuery plugins
3. Gmap3 - jQuery Google Map
4. jQuery Easing
5. Flexslider
6. prettyPhoto, and
7. jQuery Input Slider (jSlider)
8. New - jQuery AjaxChimp

All those jQuery plugins controled under paidjoo.js, except the classie.js(take a look at the javascript code before the closing of body tags).

There are 4 forms you can found in this template, they are Paidjoo Loan Form (with title Get on Top Now), Paidjoo List Form (with title Get Your Invitation), Contact Form, and Subscribe Form.

6.1 Paidjoo Loan Form

Paidjoo Loan form use get-on-top.php file to send the message to your email. To adjust the recipient address, please open the get-on-top.php file, change the value of $to variable.

How to setup the form

To adjust the form to meet what you need, you can edit the name, id, and placeholder of an input. Below is the example code to create the Paidjoo Loan form :

<form name="loanForm" id="loan_form" action="get-on-top.php" method="post">

  <fieldset>

    <div class="row-fluid">
      <div class="span12">
        <label class="form-label">How much impressions do you want?</label>
        <div class="layout-slider">
          <input id="impression_slider" type="slider" name="slider_amount" value="300" />
        </div>
      </div>
    </div>

    <div class="row-fluid">
      <div class="span12">
        <input name="name" class="span12" id="name" type="text" placeholder="Your Name">
      </div>
    </div>

    <div class="row-fluid">
      <div class="span12">
        <input name="email" class="span12" id="email" type="text" placeholder="Your Email">
      </div>
    </div>

    <div class="row-fluid">
      <div class="span12">
        <select name="niche" id="niche" class="span12">
          <option value>Your Niche</option>
          <option value="Blog">Blog </option>
		  ...
        </select>
      </div>
    </div>

    <div class="row-fluid">
      <div class="span12">
        <input id="send_access_request" type="submit" name="submit" value="Get Access">
      </div>
    </div>

    <div class="row-fluid">
      <div class="span12">

        <!-- Alert Message for Contact Form -->

      </div>
    </div>

      <p class="small-form-text">Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </fieldset>

</form> <!--  / form -->

Form Validation

Before the form data sent, it needs to be validated to check whether all required fields have been filled correctly. To adjust the validation process, please open the paidjoo.js file and head to Get on Top Form Validation (Paidjoo Loan Layout) section. You will find some validation code like this:

If you have custom field on your form, first you need to define the variable, give a variable name and define the id of the input. After that you need to define the validation just like code below // Form field validation comment. If the error variable it true then the error notification will appear. If all the validation processes finished and no error found then the contact message will be sent using get-on-top.php

6.2 Paidjoo List Form

Paidjoo Loan form use get-invitation.php file to send the message to your email. Just like the Paidjoo Loan Form, to adjust the recipient address, please open the get-invitation.php file, change the value of $to variable.

To setup the form and the validation process, basically it has the same way as Paidjoo Loan Form.

6.3 Contact Form

Contact form on contact.html use contact.php file to send the message to your email. Just like the Paidjoo Loan Form, to adjust the recipient address, please open the contact.php file, change the value of $to variable.

To setup the form and the validation process, basically it has the same way as Paidjoo Loan Form.

6.4 Footer Subscribe

The subscribe form is located on the footer of Paidjoo Loan layout. And is integrated with MailChimp using the works of AjaxChimp.js plugin.

How to connect to my mailchimp list?

Open urip.js file and find the Ajaxchimp JS section, replace the URL with your own mailchimp post URL

How to find my mailchimp post URL?

Just login to your Mailchimp account, go to your list or create a new one, head to the Signup Forms menu, select Embedded Form. There you will find "Copy/paste onto your site" section, find the URL inside form action="".

I've included 2 psd files with this template. The PSD files are well documented on the groups and layered

I've used the following images, icons or other files as listed.

1. Animate CSS
2. Soft Media Icons vol.1 and 2
3. Linecons
4. Icon Fonts and Some Icons (Entypo)
5. Atmosphere Apps background